<template>
	<view class="custom-page">
		<view class="main-page flex-col">
			<view class="loading-down flex-col c-666">
				<text class="title">登陆</text>
				<text>欢迎回来</text>
			</view>
			<view class="form-main">
				<uv-form labelPosition="top" labelWidth="auto" errorType="toast" :model="userInfo" :rules="rules"
					ref="uForm">
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="account" size="40rpx"></uv-icon>
						<uv-form-item prop="phone">
							<view class="input-box">
								<input type="text" placeholder-class="placeholders" v-model="userInfo.phone"
									placeholder="手机账号" />
							</view>
						</uv-form-item>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="lock" size="40rpx"></uv-icon>
						<uv-form-item prop="password">
							<view class="input-box">
								<input :password="true" placeholder-class="placeholders" v-model="userInfo.password"
									placeholder="密码" />
							</view>
						</uv-form-item>
					</view>
				</uv-form>	
			</view>
			<!-- <view class="forget-pwd" @click="toParse('/pageA/forgotPassword/forgotPassword')">Forgot Password?</view> -->
			<view class="loginBth loading-up flex-row align-center justify-center" @click="sumbit">
				<!-- <text v-if="!isSubmitting">icon</text> -->
				<uv-icon name="arrow-rightward" color="#fff" size="48rpx" bold></uv-icon>
			</view>
			<view class="register-link text-center m-15 loading-up">
				新账号? 
				<text @click="toParse('/pageA/register/register')">注册</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isFlag: false,
				remember: false,
				isSubmitting: false,
				userInfo: {
					phone: "",
					password: "",
				},
			};
		},
		computed: {
			/**
			 * @description 表单验证规则
			 * @returns {Object} 验证规则对象
			 */
			rules() {
				return {
					'phone': [{
							type: 'string',
							required: true,
							message: '请输入账户',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (!uni.$uv.test.mobile(value)) {
									callback(new Error('账户格式错误'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				}
			},
		},
		methods: {	
			/**
			 * @description 切换协议同意状态
			 */
			toggleAgreement() {
				this.isFlag = !this.isFlag;
			},		
			/**
			 * @description 提交登录表单
			 */
			async sumbit() {
				try {
					this.isSubmitting = true;
					// 验证表单
					await this.$refs.uForm.validate();			
					// 构建登录参数
					const loginParams = {
						phone: this.userInfo.phone,
						password: this.userInfo.password
					};					
					const { data: res } = await this.$api.post('/app/login', loginParams);					
					if (res.code != 200) {
						uni.$uv.toast(res.msg);
						return;
					}		
					uni.reLaunch({
						url: "/pages/down/down"
					})
				} catch (error) {
					console.error('登录失败:', error);
				} finally {
					this.isSubmitting = false;
				}
			},
			
			/**
			 * @description 页面导航
			 * @param {string} url - 要导航的目标URL
			 */
			toParse(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.custom-page{
		padding-top: 0;
	}
	.main-page {
		padding: 0 64rpx;
		box-sizing: border-box;
		flex: 1;
        padding-top: 182rpx;
		.title {
			font-weight: 500;
			font-size: 44rpx;
			color: #181D2D;
			text-align: left;
			font-style: normal;
		}

		.form-main {
			width: 100%;
			box-sizing: border-box;
            margin-top: 100rpx;
			.form-item {
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #C1C7D0;
				gap: 18rpx;
				.icon::after{
					content: "";
					width: 2rpx;
					height: 40rpx;
					background-color: #C1C7D0;
					margin-left: 18rpx;
				}
			}
			.remember-forget {
				margin-bottom: 30rpx;
				.remember-me {
					font-size: 26rpx;
					.checkbox {
						transform: scale(0.7);
						margin-right: 5rpx;
					}
				}
			}
		}
	}

	// .agreement-main {
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	flex-wrap: wrap;
	// 	font-size: 28rpx;
	// 	color: #4B5563;
 //        margin: 100rpx 0;
	// 	.text-link {
	// 		color: #4F46E5;
	// 	}
	// 	.checkbox {
	// 		transform: scale(0.7);
	// 		margin-right: 5rpx;
	// 	}
	// }
	.forget-pwd {
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #324A59;
		text-decoration: underline;
	}
	.register-link{
		font-size: 28rpx;
		color: #AAAAAA;
		line-height: 54rpx;
		text-align: left;
		margin-top: auto;
		margin-bottom: 50rpx;
		text{
			color:#324A59;
		}
	}
	.loginBth {
		width: 128rpx;
		height: 128rpx;
		background: #494BB2;
		border-radius: 50%;
		margin-left: auto;
		margin-top: 240rpx;
	}
</style>